<template>
  <!--贵宾厅-->
  <div class="guibinting">
    <div class="header">
      <div class="city" @click="toggle"><span>{{cityName}}</span><img src="../../assets/select.png" alt="" width="12">
      </div>
      <ul v-show="isshow" class="citylist">
        <li v-for="(item,index) in cityList" @click="check(item.cityName)">{{item.cityName}}</li>
      </ul>
      <div class="search"><input type="text" v-model="viproomName" placeholder="贵宾厅/名称/关键字"><img
        src="../../assets/search.png" alt="" width="16" @click="mysearch(viproomName)"></div>
    </div>
    <wv-tabs v-model="activeIndex" class="container" @click="getData(activeIndex)">
      <wv-tab title="全部">
        <div v-for="(item,index) in airportList" :key="item.airportId">
          <wv-group class="panel">
            <wv-cell :title="item.airportName">
              <img src="../../assets/dingwei.png" slot="icon" class="cell-icon" width="13" v-if="item.isLocation">
              <span slot="ft" v-show="!item.openState" @click="isvisible(true,index)">展开 <img
                src="../../assets/xiala.png" alt="" class="shou"></span>
              <span slot="ft" v-show="item.openState" @click="isvisible(false,index)">收起 <img
                src="../../assets/shouqi.png" alt="" class="shou"></span>
            </wv-cell>
          </wv-group>
          <div v-show="item.openState" v-for="i in item.viproomList" :key="i.goodsId">
            <div class="content" @click="todetail(i.goodsId)">
              <p><img :src="i.coverImg|imgPathFilter" alt="" width="125" height="80"></p>
              <ul>
                <li>{{i.goodsName}}</li>
                <li><img src="../../assets/address.png" alt="" width="15"><span v-if="i.securityType==1">安检内</span><span
                  v-if="i.securityType==2">安检外</span><span v-if="i.securityType==3">航班不同前往不同休息室</span></li>
                <li><img src="../../assets/clock.png" alt="" width="15">营业时间： {{i.roomTime}}</li>
              </ul>
            </div>
          </div>
        </div>
      </wv-tab>

      <wv-tab title="无需预约">
        <div v-for="(item,index) in airportList" :key="item.airportId">
          <wv-group class="panel">
            <wv-cell :title="item.airportName">
              <img src="../../assets/dingwei.png" slot="icon" class="cell-icon" width="13" v-if="item.isLocation">
              <span slot="ft" v-show="!item.openState" @click="isvisible(true,index)">展开 <img
                src="../../assets/xiala.png" alt="" class="shou"></span>
              <span slot="ft" v-show="item.openState" @click="isvisible(false,index)">收起 <img
                src="../../assets/shouqi.png" alt="" class="shou"></span>
            </wv-cell>
          </wv-group>
          <div v-show="item.openState" v-for="i in item.viproomList" :key="i.goodsId">
            <div class="content" @click="todetail(i.goodsId)">
              <p><img :src="i.coverImg|imgPathFilter" alt="" width="125" height="80"></p>
              <ul>
                <li>{{i.goodsName}}</li>
                <li><img src="../../assets/address.png" alt="" width="15"><span v-if="i.securityType==1">安检内</span><span
                  v-if="i.securityType==2">安检外</span><span v-if="i.securityType==3">航班不同前往不同休息室</span></li>
                <li><img src="../../assets/clock.png" alt="" width="15">营业时间： {{i.roomTime}}</li>
              </ul>
            </div>
          </div>
        </div>
      </wv-tab>

      <wv-tab title="需预约">
        <div v-for="(item,index) in airportList" :key="item.airportId">
          <wv-group class="panel">
            <wv-cell :title="item.airportName">
              <img src="../../assets/dingwei.png" slot="icon" class="cell-icon" width="13" v-if="item.isLocation">
              <span slot="ft" v-show="!item.openState" @click="isvisible(true,index)">展开 <img
                src="../../assets/xiala.png" alt="" class="shou"></span>
              <span slot="ft" v-show="item.openState" @click="isvisible(false,index)">收起 <img
                src="../../assets/shouqi.png" alt="" class="shou"></span>
            </wv-cell>
          </wv-group>
          <div v-show="item.openState" v-for="i in item.viproomList" :key="i.goodsId">
            <div class="content" @click="todetail(i.goodsId)">
              <p><img :src="i.coverImg|imgPathFilter" alt="" width="125" height="80"></p>
              <ul>
                <li>{{i.goodsName}}</li>
                <li><img src="../../assets/address.png" alt="" width="15"><span v-if="i.securityType==1">安检内</span><span
                  v-if="i.securityType==2">安检外</span><span v-if="i.securityType==3">航班不同前往不同休息室</span></li>
                <li><img src="../../assets/clock.png" alt="" width="15">营业时间： {{i.roomTime}}</li>
              </ul>
            </div>
          </div>
        </div>
      </wv-tab>

    </wv-tabs>
  </div>
</template>

<script type="text/ecmascript-6">
  import {viproomData, getMapInfo} from '../../../test/unit/http'
  import {wxApi} from '../../../test/unit/flyme_weixin'
  import {Toast} from 'we-vue'
  export default {
    name: 'guibinting',
    props: {},
    data() {
      return {
        isshow: false,
        cityName: '城市',
        activeIndex: 0,
        issee: false,
        islook: false,
        viproomName: "",
        cityList: [],
        airportList: []
      };
    },
    methods: {
      toggle() {
        this.isshow = !this.isshow
      },
      getViproomData(params, type) {
        viproomData(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.cityList = res.object.cityList;
            let airportList = res.object.airportList;
            if (type == 1) {
              for (let airport of airportList) {
                airport['openState'] = true;
              }
            }
            this.airportList = airportList;
            console.log('airportList   ' + this.airportList)
          }
        })
      },
      check(cityName) {
        this.cityName = cityName;
        this.isshow = !this.isshow;
        let params = {};
        if (this.activeIndex != 0) {
          params = {
            isAppoint: this.activeIndex,
            cityName: this.cityName
          };
        } else {
          params = {
            cityName: this.cityName
          };
        }
        this.getViproomData(params, '');
      },
      todetail(goodsId) {
        this.$router.push({path: '/guibindetail', query: {entrySource: "home", goodsId: goodsId}})

      },
      isvisible(isShow, index, type) {
        let airport = this.airportList[index];//获取指定元素的值
        airport['openState'] = isShow;
      },
      mysearch(viproomName) {
        let params = {};
        if (this.activeIndex != 0) {
          params = {
            isAppoint: this.activeIndex,
            cityName: this.cityName,
            goodsName: viproomName
          };
        } else {
          params = {
            cityName: this.cityName,
            goodsName: viproomName
          };
        }
        params['flg'] = 1;
        this.init(params);
      },
      getData(isAppoint) {
        let params = {cityName: this.cityName};
        if (isAppoint != 0) {
          params['isAppoint'] = isAppoint;
        }
        this.init(params);
      },
      init(params) {
        let that = this;
        that.getViproomData(params, '');
        wxApi.init(function () {
          wxApi.getLocation({
            callback: function (res) {
              console.log(res);
              let lat = res.latitude;
              let lng = res.longitude;
              let mapParams = {};
              that.getViproomData(params, flg);
              mapParams['location'] = lat + "," + lng;
              getMapInfo(mapParams).then(res => {
                console.log(res);
                let cityCode = res.result.cityCode;
                console.log(cityCode);
                params['cityCode'] = cityCode;
                let flg = params.flg;
                if (that.$myUtils.isNull(flg)) {
                  that.getViproomData(params, '');
                } else {
                  that.getViproomData(params, flg);
                }
              })
            }
          });
        });
      }
    },
    created() {
      this.init({});
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .header {
    display: flex;
    padding: 10px;
    position: relative;
    margin-bottom: 10px;
    overflow: visible;
    z-index: 2;

    .citylist {
      position: absolute;
      width: 88%;
      top: 75px;
      left: 10px;
      right: 10px;
      text-align: left;
      padding: 10px;
      border: 1px solid #eee;
      background-color: #fff;
    }

    .city, .search input {
      border: 1px solid #eee;
      box-shadow: 0 3px 4px rgba(17, 17, 17, 0.05);
      border-radius: 7px;
      height: 25px;
      line-height: 25px;
      padding: 10px;
      color: #111;
    }

    .city {
      flex: 0 100px;
      margin-right: 10px;

      img {
        float: right;
        margin-top: 10px;
      }
    }

    .search {
      position: relative;
      width: calc(100% - 110px);

      input {
        width: 90%;
      }

      img {
        position: absolute;
        right: 20px;
        top: 16px;
      }
    }
  }

  .panel .cell-icon {
    margin-right: 10px;
    vertical-align: middle;
  }

  .panel .shou {
    margin-left: 10px;
  }

  .content {
    display: flex;
    text-align: left;
    padding: 13px 0 10px;
    margin: 0 10px;
    border-bottom: 1px solid #eee;

    p {
      flex: 0 125px;
      margin-right: 10px;

      img {
        border-radius: 7px;
      }
    }

    ul {
      li {
        font-size: 12px;
        color: #999;
      }

      li:nth-child(2) {
        margin: 7px 0;
      }

      li:first-child {
        font-size: 15px;
        color: #111;
      }

      img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }

  }

  .content:last-child {
    border-bottom: none;
  }

  .container {
    position: relative;
    z-index: 1;
  }
</style>
